<template>
  <div>
    <div class="title shadow">{{ book.title }}</div>
    <div class="content container-fluid">{{ book.content }}</div>
    <div>
      <div class="more" @click="previous" v-show="book.previousId!==null">上一章</div>
      <div class="more" @click="gotoList">章节目录</div>
      <div class="more" @click="more" v-show="book.nextId!==null">下一章</div>
    </div>
  </div>

</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import UrlConfig from '../utils/api'

export default {
  name: 'BookList',
  data () {
    return {
      book: {
        title: '章节标题',
        content: '加载中...',
        typeId: 1,
        nextId: null,
        previousId: null
      },
      id: -1
    }
  },
  methods: {
    more () {
      const context = this
      this.$fetch(UrlConfig.book_content, {
        book_id: context.book.nextId
      })
        .then(function (res) {
          context.book = res.data.data
        })
    },
    previous () {
      const context = this
      this.$fetch(UrlConfig.book_content, {
        book_id: context.book.previousId
      })
        .then(function (res) {
          context.book = res.data.data
        })
    },
    gotoList () {
      let typeId = this.book.typeId
      this.$router.push({
        path: '/p_book/list',
        query: {
          type: typeId
        }
      })
    },
    notify_message (msg) {
      this.$message(msg)
    }
  },
  mounted: function () {
    const context = this
    context.id = this.$route.query.id
    this.$fetch(UrlConfig.book_content, {
      book_id: context.id
    })
      .then(function (res) {
        context.book = res.data.data
      }).catch(function () {
        context.notify_message('加载失败')
      })
  }
}
</script>

<style scoped>
  .title {
    background: lightpink;
    margin: 0;
    padding: 16px 10px 10px 10px;
    color: white;
    width: 100%;
  }

  .content {
    margin-top: 10px;
  }

  .more {
    color: white;
    padding: 5px 10px 5px 10px;
    float: left;
    margin: 10px;
    border-radius: 5px;
    background: lightpink;
  }
</style>
